﻿/******************************************************************************
* File description: StepLine.qml
* Function: 最上面的tab步骤条
* Current Version: 1.0.0
* Author: JNN
* Date: 2025-07-01
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12

import "../components"

Item {

    id: root

    height: layout_row.implicitHeight
    width: layout_row.implicitWidth

    property var pageName: ["主页", "放靶", "打靶", "转靶", "纯化"]

    function pageVisibleState(idx){            // 返回屏蔽模式下模块是否可见
        // 主页
        if(idx === 0){
            return true
        }
        // 放靶/打靶/转靶
        if(idx === 1 || idx === 2 || idx === 3){
            if(gAppModule === 0 || gAppModule === 1){
                return true
            }else{
                return false
            }
        }
        // 纯化
        if(idx === 4){
            if(gAppModule === 0 || gAppModule === 2){
                return true
            }else{
                return false
            }
        }
    }

    function refreshPageState(){

        for(let i = 0; i < 5; i ++){
            if(gExpIsRunning === 0){           // 不在实验状态的时候不要转
                pageState[i] = 0
            }else if(gStateExp.moduleStatus[i] === -1){
                pageState[i] = 3    // 错误
            }else if(gStateExp.moduleStatus[i] === 0){
                pageState[i] = 0    // 不执行
            }else if(gStateExp.moduleStatus[i] === 1){
                pageState[i] = 1    // 等待执行
            }else if(gStateExp.moduleStatus[i] === 2){
                pageState[i] = 1    // 运行中
            }else if(gStateExp.moduleStatus[i] === 3){
                pageState[i] = 2    // 已完成
            }
        }
        pageStateChanged()
    }

    Connections{
        target: gStateExp
        onModuleStatusChanged:{
            refreshPageState()
        }
    }Connections{
        target: mainwindow
        onGExpIsRunningChanged: {
            refreshPageState()
        }onGExpIsFailureChanged: {
            refreshPageState()
        }onGExpIsPauseChanged: {
            refreshPageState()
        }
    }

    property var pageState: [0, 0, 0, 0, 0]         // 0灰色  1蓝色  2绿色  3红色
    property var deepColor: ["#1677FF", "#1677FF", "#56BD6C", "#F04545"]
    property var lightColor: ["#CCCCCC", "#D9E9FF", "#B5F3B7", "#FA9898"]
    property var connectState: [0, 0, 0, 0, 0]

    property real buttonSize: 43*dp

    signal tabPage(var idx)

    Row{
        id: layout_row
        Repeater{
            model: pageName.length
            Row{
                id: item
                property bool isHovered: true
                height: buttonSize
                visible: pageVisibleState(index)

                Item{           // 间隔线
                    visible: index > 0
                    height: parent.height;  width: 90*dp
                    Rectangle{                                  // 线
                        height: 2*dp;   width: 60*dp
                        anchors.centerIn: parent
                        color: {
                            return "#CCCCCC"            // 间隔线就不要带色了……
                        }
                    }
                }
                Rectangle{      // 序号小圆圈
                    visible: index !== 0
                    border.color: "white"
                    border.width: 2
                    height: buttonSize; width: height
                    radius: 0.5*height
                    color: gPageIdx===index ? deepColor[pageState[index]] : lightColor[pageState[index]]
                    Text {          // 标号
                        visible: gStateExp.moduleStatus[index] !== 2 && gStateExp.moduleStatus[index] !== 3    // 运行中不显示，显示转圈圈的动画
                        text: qsTr(index.toString())
                        anchors.centerIn: parent
                        font.pixelSize: config.fontsize_1
                        color: gPageIdx===index ? "#FFF" : "#233"
                    }
                    CustomImage{          // 对号
                        visible: gStateExp.moduleStatus[index] === 3
                        height: 0.6*parent.height
                        width: 0.6*parent.width
                        source: gPageIdx===index ? "qrc:/picture/stepLine/finish_1.png" : "qrc:/picture/stepLine/finish_g.png"
                        anchors.centerIn: parent
                    }
                    CustomAnimatedImage{  // 转圈
                        visible: gStateExp.moduleStatus[index] === 2 && (gExpIsRunning === 1)
                        source: gPageIdx===index ? "qrc:/picture/stepLine/running_1.gif" : "qrc:/picture/stepLine/running_0.gif"
                        playing: visible
                        height: 0.56*parent.height
                        width: 0.56*parent.width
                        anchors.centerIn: parent
                        opacity: gPageIdx===index ? 1 : 0.6 // 黑的那个转圈有点太黑了……
                    }
                }
                Rectangle{    // 按钮
                    height: buttonSize;  width: height*2.8
                    radius: 0.5*height
                    border.color: "white"
                    border.width: 2
                    color: gPageIdx===index ? deepColor[pageState[index]] : lightColor[pageState[index]]
                    opacity: item.isHovered ? 0.9 : 1
                    CustomImage{
                        id: bt_image
                        height: 20*dp; width: 20*dp
                        source: "qrc:/picture/stepLine/step" + index + "_" + (gPageIdx===index?"1":"0") + ".png"
                        anchors.centerIn: parent
                        anchors.horizontalCenterOffset: -bt_text.contentWidth*0.5 - 2*dp
                    }
                    Text {
                        id: bt_text
                        text: qsTr(pageName[index])
                        font.pixelSize: config.fontsize_1
                        anchors.centerIn: parent
                        color: gPageIdx===index ? "#FFF" : "#233"
                        anchors.horizontalCenterOffset: bt_image.width*0.5
                    }
                    MouseArea{
                        anchors.fill: parent
                        cursorShape: "PointingHandCursor"
                        hoverEnabled: true
                        onEntered: {
                            item.isHovered = true
                        }onExited: {
                            item.isHovered = false
                        }
                        onClicked: {
                            if(gExpIsRunning === 0){       // 未运行时可以跳转
                                root.tabPage(index)
                            }else{
                                if(gStateExp.selectedExpType === 0){
                                    root.tabPage(index)
                                }else{
                                    toast.show("单步实验进行中，无法跳转页面", 1)
                                }
                            }
                        }
                    }
                }
            }


        }
    }





}
